/*
 * @Author: FengKongLi 
 * @Date: 2021-08-29 22:51:14 
 * @Last Modified by: FengKongLi
 * @Last Modified time: 2021-08-30 19:17:16
 */
//  首页
<template>
  <div>
    <!-- NavBar导航栏 -->
    <div class="head">
      <van-nav-bar title="首页" left-text="返回" left-arrow>
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe :autoplay="3000" class="my-swipe">
        <van-swipe-item v-for="item in swiperData" :key="item.id">
          <img class="swiper_img" :src="item.url" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 宫格 -->
    <div>
      <van-grid icon-size="30px" gutter="15px" :border="false">
        <van-grid-item icon="todo-list" text="订单" style="color: #66cccc" />
        <van-grid-item icon="gold-coin" text="收益" style="color: #ff0033" />
        <van-grid-item icon="question" text="帮助" style="color: #cccccc" />
        <van-grid-item icon="wap-home" text="我的" style="color: #0099cc" />
      </van-grid>
    </div>
    <!-- 订单列表 -->
    <div class="order">
      <div>我的订单</div>
     <orderList/>
    </div>
  </div>
</template>

<script>
import { query } from "@/api/index";
import orderList from "@/components/orderList.vue";
export default {
  name: "",
  data() {
    return {
      // 轮播图数据
      swiperData: [],
    };
  },
 
  components:{
    orderList 
  },
  created() {
    this.getSwipeData();
  },
  methods: {
    // 获取轮播图数据
    async getSwipeData() {
      let res = await query({ status: "正常" });
      this.swiperData = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  margin-top: 5px;

  .my-swipe {
    .van-swipe-item {
      width: 100%;
      height: 30vh;
      color: #fff;
      text-align: center;
      .swiper_img {
        width: 95%;
        height: 100%;
        // object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
        object-fit: cover;
        border-radius: 10px 10px;
      }
    }
  }
}

.van-grid {
  margin-top: 15px;
  // padding-left: 0px;
  .van-grid-item {
    font-size: 20px;
    /deep/ .van-grid-item__content--center {
      background-color: #fff;
      box-shadow: 0px 0px 5px #666;
      border-radius: 5px;
      cursor: pointer;
    }
    /deep/ .van-grid-item__text {
      font-size: 16px;
      color: #0066ff;
    }
  }
}
.order {
  width: 95%;
  margin: 5% auto;
  // padding-bottom: 30px;
}
</style>